<template>
<div class="home">
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item v-for="item in tu" :key="item._id">
    <img :src="item.coverImg" alt="" class="img">
  </van-swipe-item>
</van-swipe>
<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
 <div v-for="item in list" :key="item._id" class="product" @click="todetail(item._id)">
   <img :src="item.coverImg" alt="">
   <div class="product_r">
     <div>{{item.name}}</div>
     <div>{{item.price}}</div>
   </div>
 </div>
</van-list>
</div>
</template>

<script>
import {reqlunboapi,reqshoopingapi} from "../../api/products";
export default {
  data() {
    return {
      tu:[],
      page:1,
      list: [],
      loading: false,
      finished: false,
    };
  },
  computed: {},
  watch: {},

  methods: {
    //轮播图
    async lunbo(){
      const result=await reqlunboapi();
      console.log(result);
      this.tu=result.products;
    },
    // 商品列表
    onLoad() {this.shopping()},
    async shopping(){
      this.loading=true;
      const result=await reqshoopingapi({page:this.page});
      this.loading=false;
      // console.log(result);
      this.list=[...this.list,...result.products];
      if(result.products.length<10){
        this.finished=true;
      }else{
        this.page++;
      }
    },
    //跳转商品详情
    todetail(id){
       this.$router.push({path:`/detail/${id}`})
    }
  },
  created() {this.lunbo()},
  mounted() {},
  components: {},
};
</script>
<style scoped>
.img{
  width: 100%;
  height: 200px;
}
.van-swipe-item img {
  width: 100%;
  height: 200px;
}
.product {
  display: flex;
  justify-content: flex-start;
  padding: 10px;
}
.product img {
  width: 80px;
  height: 80px;
}
.product_r {
  margin-left: 10px;
  flex: 1;
}
.van-list {
  padding-bottom: 40px;
}
</style>
